/**
 * https://www.cssscript.com/ios-style-pure-css-switch-buttons-ios-switcher/
 */
.form-switcher {
    input[type='checkbox'] {
        display: none;

        &:disabled {
            & + .switcher {
                box-shadow: 0 0 0 transparent !important;
                cursor: not-allowed;
                opacity: 0.6;

                &::after {
                    height: 21px !important;
                    width: 21px !important;
                }
            }

            &:checked {
                & + .switcher {
                    &::after {
                        transform: translateX(18px) !important;
                    }
                }
            }
        }

        &:checked {
            &:disabled {
                & + .switcher {
                    border-color: darken($active_theme, 5%) !important;
                    box-shadow: 0 0 0 15px $active_theme inset !important;
                }
            }

            & + .switcher {
                background-color: $green;
                border-color: $green;
                box-shadow: 0 0 0 12.5px $green inset;
                transition: box-shadow $anim-time $anim-ease, border-color $anim-time $anim-ease 0.02s;

                &::after {
                    transform: translateX(18px);
                }

                &:hover {
                    &:active {
                        &::after {
                            transform: translateX(10.65px);
                        }
                    }
                }
            }
        }
    }

    .switcher {
        background-color: $active_theme;
        border: 2px solid $active_theme;
        border-radius: 100vw;
        cursor: pointer;
        display: block;
        height: 25px;
        padding: 0;
        position: relative;
        transition: box-shadow $anim-time $anim-ease 0.02s, border-color $anim-time $anim-ease;
        width: 43px;

        &::after {
            background-color: $white;
            border-radius: 100vw;
            box-shadow: 0 1px 3px rgba($black, 0.4);
            content: '';
            height: 21px;
            left: 0;
            position: absolute;
            top: 0;
            transform: translateX(0);
            transition: all $anim-time $anim-ease;
            width: 21px;
        }

        &:hover {
            &:active {
                box-shadow: 0 0 0 13px $active_theme inset;

                &::after {
                    width: 28.35px !important;
                }
            }
        }
    }
}

.form-switcher.form-switcher-sm {
    .switcher {
        height: 18px;
        width: 31px;

        &:hover {
            &:active {
                box-shadow: 0 0 0 13px $active_theme inset;

                &::after {
                    width: 18.9px !important;
                }
            }
        }

        &::after {
            height: 14px;
            width: 14px;
        }
    }

    input[type='checkbox'] {
        &:disabled {
            & + .switcher {
                &::after {
                    height: 14px !important;
                    width: 14px !important;
                }
            }

            &:checked {
                & + .switcher {
                    &::after {
                        transform: translateX(13px) !important;
                    }
                }
            }
        }

        &:checked {
            & + .switcher {
                background-color: $green;
                border-color: $green;
                box-shadow: 0 0 0 9px $green inset;

                &::after {
                    transform: translateX(13px);
                }

                &:hover {
                    &:active {
                        &::after {
                            transform: translateX(8.1px);
                        }
                    }
                }
            }
        }
    }
}

.form-switcher.form-switcher-lg {
    .switcher {
        height: 30px;
        width: 53px;

        &:hover {
            &:active {
                box-shadow: 0 0 0 13px $active_theme inset;

                &::after {
                    width: 35.1px !important;
                }
            }
        }

        &::after {
            height: 26px;
            width: 26px;
        }
    }

    input[type='checkbox'] {
        &:disabled {
            & + .switcher {
                &::after {
                    height: 26px !important;
                    width: 26px !important;
                }
            }

            &:checked {
                & + .switcher {
                    &::after {
                        transform: translateX(23px) !important;
                    }
                }
            }
        }

        &:checked {
            & + .switcher {
                background-color: $green;
                border-color: $green;
                box-shadow: 0 0 0 15px $green inset;

                &::after {
                    transform: translateX(23px);
                }

                &:hover {
                    &:active {
                        &::after {
                            transform: translateX(13.9px);
                        }
                    }
                }
            }
        }
    }
}

@include media('max', 768) {
    .form-switcher.form-switcher-sm-phone {
        .switcher {
            height: 18px;
            width: 31px;

            &:hover {
                &:active {
                    box-shadow: 0 0 0 13px $active_theme inset;

                    &::after {
                        width: 18.9px !important;
                    }
                }
            }

            &::after {
                height: 14px;
                width: 14px;
            }
        }

        input[type='checkbox'] {
            &:disabled {
                & + .switcher {
                    &::after {
                        height: 14px !important;
                        width: 14px !important;
                    }
                }

                &:checked {
                    & + .switcher {
                        &::after {
                            transform: translateX(13px) !important;
                        }
                    }
                }
            }

            &:checked {
                & + .switcher {
                    background-color: $green;
                    border-color: $green;
                    box-shadow: 0 0 0 9px $green inset;

                    &::after {
                        transform: translateX(13px);
                    }

                    &:hover {
                        &:active {
                            &::after {
                                transform: translateX(8.1px);
                            }
                        }
                    }
                }
            }
        }
    }

    .form-switcher.form-switcher-md-phone {
        .switcher {
            height: 25px;
            width: 43px;

            &:hover {
                &:active {
                    box-shadow: 0 0 0 13px $active_theme inset;

                    &::after {
                        width: 28.35px !important;
                    }
                }
            }

            &::after {
                height: 21px;
                width: 21px;
            }
        }

        input[type='checkbox'] {
            &:disabled {
                & + .switcher {
                    &::after {
                        height: 21px !important;
                        width: 21px !important;
                    }
                }

                &:checked {
                    & + .switcher {
                        &::after {
                            transform: translateX(18px) !important;
                        }
                    }
                }
            }

            &:checked {
                & + .switcher {
                    background-color: $green;
                    border-color: $green;
                    box-shadow: 0 0 0 12.5px $green inset;

                    &::after {
                        transform: translateX(18px);
                    }

                    &:hover {
                        &:active {
                            &::after {
                                transform: translateX(10.65px);
                            }
                        }
                    }
                }
            }
        }
    }

    .form-switcher.form-switcher-lg-phone {
        .switcher {
            height: 30px;
            width: 53px;

            &:hover {
                &:active {
                    box-shadow: 0 0 0 13px $active_theme inset;

                    &::after {
                        width: 35.1px !important;
                    }
                }
            }

            &::after {
                height: 26px;
                width: 26px;
            }
        }

        input[type='checkbox'] {
            &:disabled {
                & + .switcher {
                    &::after {
                        height: 26px !important;
                        width: 26px !important;
                    }
                }

                &:checked {
                    & + .switcher {
                        &::after {
                            transform: translateX(23px) !important;
                        }
                    }
                }
            }

            &:checked {
                & + .switcher {
                    background-color: $green;
                    border-color: $green;
                    box-shadow: 0 0 0 15px $green inset;

                    &::after {
                        transform: translateX(23px);
                    }

                    &:hover {
                        &:active {
                            &::after {
                                transform: translateX(13.9px);
                            }
                        }
                    }
                }
            }
        }
    }
}

@include media('max', 991) {
    .form-switcher.form-switcher-sm-tablet {
        .switcher {
            height: 18px;
            width: 31px;

            &:hover {
                &:active {
                    box-shadow: 0 0 0 13px $active_theme inset;

                    &::after {
                        width: 18.9px !important;
                    }
                }
            }

            &::after {
                height: 14px;
                width: 14px;
            }
        }

        input[type='checkbox'] {
            &:disabled {
                & + .switcher {
                    &::after {
                        height: 14px !important;
                        width: 14px !important;
                    }
                }

                &:checked {
                    & + .switcher {
                        &::after {
                            transform: translateX(13px) !important;
                        }
                    }
                }
            }

            &:checked {
                & + .switcher {
                    background-color: $green;
                    border-color: $green;
                    box-shadow: 0 0 0 9px $green inset;

                    &::after {
                        transform: translateX(13px);
                    }

                    &:hover {
                        &:active {
                            &::after {
                                transform: translateX(8.1px);
                            }
                        }
                    }
                }
            }
        }
    }

    .form-switcher.form-switcher-md-tablet {
        .switcher {
            height: 25px;
            width: 43px;

            &:hover {
                &:active {
                    box-shadow: 0 0 0 13px $active_theme inset;

                    &::after {
                        width: 28.35px !important;
                    }
                }
            }

            &::after {
                height: 21px;
                width: 21px;
            }
        }

        input[type='checkbox'] {
            &:disabled {
                & + .switcher {
                    &::after {
                        height: 21px !important;
                        width: 21px !important;
                    }
                }

                &:checked {
                    & + .switcher {
                        &::after {
                            transform: translateX(18px) !important;
                        }
                    }
                }
            }

            &:checked {
                & + .switcher {
                    background-color: $green;
                    border-color: $green;
                    box-shadow: 0 0 0 12.5px $green inset;

                    &::after {
                        transform: translateX(18px);
                    }

                    &:hover {
                        &:active {
                            &::after {
                                transform: translateX(10.65px);
                            }
                        }
                    }
                }
            }
        }
    }

    .form-switcher.form-switcher-lg-tablet {
        .switcher {
            height: 30px;
            width: 53px;

            &:hover {
                &:active {
                    box-shadow: 0 0 0 13px $active_theme inset;

                    &::after {
                        width: 35.1px !important;
                    }
                }
            }

            &::after {
                height: 26px;
                width: 26px;
            }
        }

        input[type='checkbox'] {
            &:disabled {
                & + .switcher {
                    &::after {
                        height: 26px !important;
                        width: 26px !important;
                    }
                }

                &:checked {
                    & + .switcher {
                        &::after {
                            transform: translateX(23px) !important;
                        }
                    }
                }
            }

            &:checked {
                & + .switcher {
                    background-color: $green;
                    border-color: $green;
                    box-shadow: 0 0 0 15px $green inset;

                    &::after {
                        transform: translateX(23px);
                    }

                    &:hover {
                        &:active {
                            &::after {
                                transform: translateX(13.9px);
                            }
                        }
                    }
                }
            }
        }
    }
}

// extra
.form-switcher.is-danger {
    .switcher {
        background-color: $red;
        border: 2px solid $red;
    }
}
